﻿<mockups:WindowsPhoneChrome 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mockups="clr-namespace:Microsoft.Expression.Prototyping.WindowsPhone.Mockups;assembly=WindowsPhone.Mockups"
    xmlns:pc="http://schemas.microsoft.com/prototyping/2010/controls"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
	xmlns:wp="http://schemas.microsoft.com/prototyping/2010/controls/windowsphone" 
	xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    mc:Ignorable="d"
    x:Class="MS_SocialPhotoSketchScreens.DetailPage"
    x:Name="PhoneChrome">
	<mockups:WindowsPhoneChrome.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<ResourceDictionary Source="ProjectDataSources.xaml"/>
			</ResourceDictionary.MergedDictionaries>
		</ResourceDictionary>
	</mockups:WindowsPhoneChrome.Resources>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="OrientationChanged">
            <i:Interaction.Behaviors>
                <ei:ConditionBehavior>
                    <ei:ConditionalExpression>
                        <ei:ComparisonCondition LeftOperand="{Binding PageOrientation, ElementName=PhoneChrome}"
                                                RightOperand="Landscape" />
                    </ei:ConditionalExpression>
                </ei:ConditionBehavior>
            </i:Interaction.Behaviors>
            <mockups:GoToStateAction StateName="Landscape"
                                     TargetObject="{Binding ElementName=LayoutRoot}"
                                     TargetName="LayoutRoot" />
        </i:EventTrigger>
        <i:EventTrigger EventName="OrientationChanged">
            <i:Interaction.Behaviors>
                <ei:ConditionBehavior>
                    <ei:ConditionalExpression>
                        <ei:ComparisonCondition LeftOperand="{Binding PageOrientation, ElementName=PhoneChrome}"
                                                RightOperand="Portrait" />
                    </ei:ConditionalExpression>
                </ei:ConditionBehavior>
            </i:Interaction.Behaviors>
            <mockups:GoToStateAction StateName="Portrait"
                                     TargetObject="{Binding ElementName=LayoutRoot}"
                                     TargetName="LayoutRoot" />
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <mockups:WindowsPhoneChrome.BackButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateBackAction />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/back.png" />
        </Button>
    </mockups:WindowsPhoneChrome.BackButton>

    <mockups:WindowsPhoneChrome.HomeButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.Home" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/home.png" />
        </Button>
    </mockups:WindowsPhoneChrome.HomeButton>

    <mockups:WindowsPhoneChrome.SearchButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.Search" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/search.png" />
        </Button>
    </mockups:WindowsPhoneChrome.SearchButton>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
       <Grid.RowDefinitions>
    		<RowDefinition Height="*"/>
    		<RowDefinition Height="auto"/>
    	</Grid.RowDefinitions>
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager />
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates"
                              ei:ExtendedVisualStateManager.UseFluidLayout="True">
                <VisualState x:Name="Portrait" />
                <VisualState x:Name="Landscape">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(WindowsPhoneChrome.PageOrientation)"
                                                       Storyboard.TargetName="PhoneChrome">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <mockups:PageOrientation>Landscape</mockups:PageOrientation>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    	<wp:Pivot Title="Social Photo" Margin="4" ItemsSource="{Binding SocialPhoto}">
    		<wp:Pivot.HeaderTemplate>
    			<DataTemplate>
    				<TextBlock Text="{Binding Name}"/>		
				</DataTemplate> 		
			</wp:Pivot.HeaderTemplate>
			<wp:Pivot.ItemTemplate>
				<DataTemplate>
					<Grid>
    				<Grid.RowDefinitions>
    					<RowDefinition Height="auto"/>
						<RowDefinition Height="30"/>
						<RowDefinition Height="auto"/>
						<RowDefinition Height="auto"/>
					</Grid.RowDefinitions>
    				<Image Source="{Binding Photo}" VerticalAlignment="top"/>
    				<StackPanel Orientation="Horizontal" Grid.Row="1" >
    					<TextBlock Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" TextWrapping="Wrap" Text="Descriptions" FontSize="24" Margin="0,0,230,0" FontWeight="Bold"/>				
						<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" Height="20" Width="20" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" />
						<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" Height="20" Width="20" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" />
						<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" Height="20" Width="20" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" />
						<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" Height="20" Width="20" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" />
						<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" Height="20" Width="20" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" />
					</StackPanel>
    				<TextBlock Text="{Binding Description}" Grid.Row="2" Style="{StaticResource BasicTextBlock-Sketch}"/>
					<HyperlinkButton Grid.Row="3" Content="Location" Style="{StaticResource HyperlinkButton-Sketch}" FontSize="24" HorizontalAlignment="Left" VerticalAlignment="Top">
						<i:Interaction.Triggers>
								<i:EventTrigger EventName="Click">
									<pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.LocationPage"/>
								</i:EventTrigger>
							</i:Interaction.Triggers>
					</HyperlinkButton>
				</Grid>
				</DataTemplate>
			</wp:Pivot.ItemTemplate>
    	</wp:Pivot>
    	<mockups:ApplicationBarMockup Grid.Row="1" VerticalAlignment="Stretch">
    		<mockups:ApplicationBarMockup.IconButtonsContent>
    			 	<StackPanel Orientation="Horizontal">
    			 		<mockups:ApplicationBarIconButton Content="Like" ImageSource="AppBarIcons/Like.png"/>
						<mockups:ApplicationBarIconButton Content="DisLike" ImageSource="AppBarIcons/DisLike.png"/>
						<mockups:ApplicationBarIconButton Content="Comment" ImageSource="AppBarIcons/Commend.png">
							<i:Interaction.Triggers>
								<i:EventTrigger EventName="Click">
									<pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.CommentPage"/>
								</i:EventTrigger>
							</i:Interaction.Triggers>
						</mockups:ApplicationBarIconButton>
						<mockups:ApplicationBarIconButton Content="Share to Facebook" ImageSource="AppBarIcons/FaceBook.png">
							<i:Interaction.Triggers>
								<i:EventTrigger EventName="Click">
									<pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.SharePage"/>
								</i:EventTrigger>
							</i:Interaction.Triggers>
						</mockups:ApplicationBarIconButton> 	
					</StackPanel>
			</mockups:ApplicationBarMockup.IconButtonsContent>
    		<mockups:ApplicationBarMockup.MenuItemsContent>
    			<StackPanel>
    				<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="Like"/>
    				<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="DisLike"/>
					<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="Comment"/>
					<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="Share to Facebook"/>
    			</StackPanel>
    		</mockups:ApplicationBarMockup.MenuItemsContent>
    	</mockups:ApplicationBarMockup>
    </Grid>
</mockups:WindowsPhoneChrome>
